<template>
  <t-modal
      :title="title"
      :width="600"
      :visible="visible"
      :confirmLoading="loading"
      destroyOnClose
      @ok="
			() => {
				$emit('ok');
			}
		"
      @cancel="
			() => {
				$emit('cancel');
			}
		"
      :switchFullscreen="true"
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['uuid']" disabled type="hidden"/>
          </a-form-item>
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['menuId']" disabled type="hidden"/>
          </a-form-item>
          <a-col class="gutter-row" :span="24">
            <a-form-item :label="$ct('identification','标识')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入标识" v-decorator="['langCode', { rules: [{ required: true, message: '请输入标识!' }] }]"
              />
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24" v-for="item in langData" :key="item.configValue">
            <a-form-item :label="item.configKey" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :placeholder="'请输入'+item.configKey" v-decorator="[item.configValue, { rules: [{ required: true, message: '请输入'+item.configKey+'!' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
  import pick from 'lodash.pick';
  import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag';
  import ARow from "ant-design-vue/es/grid/Row";


  // 表单字段
  const fields = ['langCode', 'menuId', 'langClass','uuid'];
  //表头
  export default {
    components: {
      ARow,
      TDictSelectTag,
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      loading: {
        type: Boolean,
        default: () => false,
      },
      model: {
        type: Object,
        default: () => null,
      },
      groupData: {
        type: Array,
        default: () => [],
      },
      langData: {
        type: Array,
        default: () => [],
      }
    },
    data() {
      return {
        title: '',
        labelCol: {
          xs: {
            span: 3,
          },
          sm: {
            span: 3,
          },
        },
        wrapperCol: {
          xs: {
            span: 20,
          },
          sm: {
            span: 20,
          },
        },
        form: this.$form.createForm(this),
        data: [],
        isAdd: true,
      };
    },
    created() {
      // 防止表单未注册
      fields.forEach((v) => this.form.getFieldDecorator(v));
      // 当 model 发生改变时，为表单设置值
      this.$watch('model', () => {
        let langFields = []
        this.langData.forEach(item => {
          langFields.push(item.configValue)
        })
				let fieldData = langFields.concat(fields)
        this.$nextTick(() => {
					this.model && this.form.setFieldsValue(pick(this.model, fieldData));
				})
      });
    },
    mounted(){
    },
    methods: {
      add(e) {
        this.isAdd = true
      },
      edit(e) {
        this.isAdd = false

      }
    },
  };
</script>
